import 'dart:math';
import 'package:demo/pages/models/setting_data.dart';
import 'package:demo/pages/navpages/shop_page.dart';
import 'package:flutter/material.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({Key? key}) : super(key: key);

  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {
  ScrollController _scrollController = ScrollController();
  double _opacity = 0.0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        _opacity = _scrollController.offset > 100 ? 1.0 : _scrollController.offset / 100;
      });
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          _buildSliverAppBar(),
          _buildStickyBar(),
          _buildList(),
          _buildSeparator(),
        ],
      ),
    );
  }

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: Stack(
        children: [
          Positioned.fill(
            child: Image.network(
              "http://image2.sina.com.cn/ent/s/j/p/2007-01-12/U1345P28T3D1407314F329DT20070112145144.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Positioned.fill(
            child: Opacity(
              opacity: _opacity,
              child: Container(
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSeparator() {
    return SliverToBoxAdapter(
      child: Container(
        height: 1,
        color: Colors.white,
      ),
    );
  }

  Widget _buildStickyBar() {
    return SliverPersistentHeader(
      pinned: true,
      floating: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 50,
        maxHeight: 50,
        child: Container(
          padding: const EdgeInsets.only(left: 16),
          color: Colors.white.withOpacity(_opacity),
          alignment: Alignment.center,
          child: Container(
            width: 120,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
            ),
            child: ElevatedButton(
              onPressed: () {
                // 跳转到目标页面
                Navigator.push(context,MaterialPageRoute(builder: (context)=> ShopPage()));
              },
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.black),
                textStyle: MaterialStateProperty.all(
                  TextStyle(fontSize: 18, color: Colors.white),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
              ),
              child: Text("Wallet"),
            ),
          ),
        ),
      ),
    );
  }
  Widget _buildList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
            (context, index) {
          final item = itemList[index];

          bool isLargeSpacing = (index + 1) % 4 == 3 || (index + 1) % 3 == 0;

          return GestureDetector(
            onTap: () {
              // 跳转到目标页面
              Navigator.push(context,MaterialPageRoute(builder: (context)=> ShopPage()));
            },
            child: Container(
              height: 60,
              padding: EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  bottom: BorderSide(
                    color: Colors.white,
                    width: isLargeSpacing ? 3.0 : 0.0,
                  ),
                ),
              ),
              margin: EdgeInsets.only(bottom: isLargeSpacing ? 30 : 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    item.title,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Icon(
                    item.icon,
                    color: Colors.black,
                  ),
                ],
              ),
            ),
          );
            },
        childCount: itemList.length,
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    required this.minHeight,
    required this.maxHeight,
    required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => max(maxHeight, minHeight);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}
